<template>
  <a-card title="补考申请">
    <a-alert
      message="补考申请说明"
      description="请仔细核对可补考课程信息，确认无误后提交申请。申请提交后不可修改，请谨慎操作。"
      type="info"
      show-icon
      style="margin-bottom: 20px;"
    />
    
    <a-table
      :columns="columns"
      :dataSource="applicableCourses"
      rowKey="courseId"
      :pagination="false"
    >
      <template slot="action" slot-scope="text, record">
        <a-button
          type="primary"
          size="small"
          @click="handleApply(record)"
          :disabled="record.applied"
        >
          {{ record.applied ? '已申请' : '申请补考' }}
        </a-button>
      </template>
    </a-table>
    
    <div style="margin-top: 20px;">
      <a-checkbox-group v-model="selectedCourses" style="margin-bottom: 10px;">
        <a-checkbox v-for="course in applicableCourses" 
                   :key="course.courseId" 
                   :value="course.courseId"
                   :disabled="course.applied">
          {{ course.courseName }}
        </a-checkbox>
      </a-checkbox-group>
      
      <a-button type="primary" @click="handleBatchApply" :disabled="!selectedCourses.length">
        批量申请 ({{ selectedCourses.length }})
      </a-button>
    </div>
    
    <a-divider orientation="left">已申请课程</a-divider>
    
    <a-table
      :columns="columns"
      :dataSource="appliedCourses"
      rowKey="courseId"
      :pagination="false"
    >
      <template slot="action" slot-scope="text, record">
        <a-popconfirm
          title="确定要取消申请吗？"
          @confirm="handleCancel(record)"
        >
          <a-button type="danger" size="small">取消申请</a-button>
        </a-popconfirm>
      </template>
    </a-table>
  </a-card>
</template>

<script>
export default {
  data() {
    return {
      columns: [
        { title: '课程编号', dataIndex: 'courseCode' },
        { title: '课程名称', dataIndex: 'courseName' },
        { title: '学分', dataIndex: 'credit' },
        { title: '原始成绩', dataIndex: 'score' },
        { title: '学年学期', dataIndex: 'academicTerm' },
        { title: '操作', scopedSlots: { customRender: 'action' } }
      ],
      applicableCourses: [
        {
          courseId: 'C001',
          courseCode: 'MATH101',
          courseName: '高等数学（上）	',
          credit: 4,
          score: 58,
          academicTerm: '2022-2024-1',
          applied: false
        },
        {
          courseId: 'C002',
          courseCode: 'ENG201',
          courseName: 'PLC与工业控制技术',
          credit: 3,
          score: 65,
          academicTerm: '2022-2024-1',
          applied: false
        },
        {
          courseId: 'C003',
          courseCode: 'CS301',
          courseName: '数据结构',
          credit: 4,
          score: 59,
          academicTerm: '2022-2024-1',
          applied: false
        }
      ],
      appliedCourses: [
        {
          courseId: 'C004',
          courseCode: 'CS302',
          courseName: '计算机组成原理',
          credit: 3,
          score: 55,
          academicTerm: '2022-2024-1',
          applied: true
        }
      ],
      selectedCourses: []
    }
  },
  
  methods: {
    handleApply(record) {
      record.applied = true
      this.appliedCourses.push({...record, applied: true})
      this.applicableCourses = this.applicableCourses.filter(c => c.courseId !== record.courseId)
      this.$message.success('申请成功')
    },
    
    handleCancel(record) {
      record.applied = false
      this.applicableCourses.push({...record, applied: false})
      this.appliedCourses = this.appliedCourses.filter(c => c.courseId !== record.courseId)
      this.$message.success('取消成功')
    },
    
    handleBatchApply() {
      this.selectedCourses.forEach(courseId => {
        const course = this.applicableCourses.find(c => c.courseId === courseId)
        if (course) {
          course.applied = true
          this.appliedCourses.push({...course, applied: true})
        }
      })
      
      this.applicableCourses = this.applicableCourses.filter(c => !this.selectedCourses.includes(c.courseId))
      this.$message.success(`成功申请 ${this.selectedCourses.length} 门课程补考`)
      this.selectedCourses = []
    }
  }
}
</script>